Favicon for Safari: favicon.ico, and ?v=2 on the icon links - #46

P41 follow-up: Safari shows the bike as favicon too.

What changes

• public/favicon.ico: your file, unchanged (16, 32 and 48 px, rendered from favicon.svg).
• index.html:

  <link rel="icon" href="/favicon.ico?v=2" sizes="32x32" />
  <link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2" />

  • Why the .ico: Safari supports SVG favicons only from Safari 26. Safari 18.6 on the Mac found no icon it could use, hence its grey «G».
  • Why ?v=2: it gives each icon a new address, so a browser fetches it afresh. A comment in index.html says to raise it when the logo changes.

The query survives the build and the service worker

• Build: Vite leaves these links in dist/index.html as written (files from public/ aren't renamed), and copies favicon.ico unchanged.
• Service worker: coi-serviceworker.js only passes requests through to add the isolation headers. It has no Cache API and doesn't rewrite URLs.
• Live site: GitHub Pages serves favicon.svg and apple-touch-icon.png with Cache-Control: max-age=600, so the server never hands out an old icon for more than 10 minutes. Today favicon.svg is already the bike, and favicon.ico gives a 404 until this PR.

Checks

• test:browser (27 checks, 1 new): the page has exactly these three links, and all three icons load through the page, and so through the service worker, with ?v=2: status 200, an image type, not empty.
• Lint and the build pass.

Going live

Merging deploys the IDE. Nothing else is needed.

Manual tests (without deleting website data)

1. Safari on the Mac (18.6): open https://glpython-edu.github.io/ and reload. The tab shows the bike, not «G».
2. Safari on the iPad: open the IDE in a normal tab and reload, then in a new private tab. Both should show the bike instead of the bolt.
3. Chrome: the bike, as before.
4. If the iPad still shows the bolt after a reload, open the IDE once with an address it has never seen, e.g. https://glpython-edu.github.io/?x=1. Then the bolt comes from Safari's own favicon store, not from the site.

Follow-ups (not done)

• Dark tab strip: the favicon's ink square is close to a dark tab strip (noted in glpython's own logo: favicon, apple-touch-icon, the mark in the top bar #44).

🤖 Generated with Claude Code